import React, { Component, createRef } from 'react';

class CreateRef extends Component {

    //1. 使用 createRef() 来创建ref 容器 对象，并添加为实例对象属性
    input = React.createRef();
    box = createRef();

    //创建方法
    getValue = ()=>{
        console.dir(this.input.current.value);
        //获取数据
        let value = this.input.current.value;
        //展示数据
        this.box.current.innerHTML = value;
        //清空数据
        this.input.current.value = "";

    }
   
    render() {
        return (
            <>
                <h1>createRef()</h1>
                <input ref={this.input} type="text" />
                <button onClick={this.getValue}>获取数据并展示</button>
                <div ref={this.box} style={{width:300,height:300,border:"1px solid red"}}></div>
            </>
        );
    }
}

export default CreateRef;